<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./less/main.css">
</head>
<body>
    <div id="wrap">
        <header class="header_top">
            <div class="header_top_cont">
                <p class="header_top_cont_l">
                    欢迎来到尚品汇！ 
                    <a href="#">请登录</a> <em>|</em>
                    <a href="#">注册</a>
                </p>
                <div class="header_top_cont_r">
                    <a href="#">我的订单</a>
                    <a href="#">我的订单</a>
                    <a href="#">我的订单</a>
                    <a href="#">我的订单</a>
                    <a href="#">我的订单</a>
                    <a href="#">我的订单</a>
                    <a href="#">我的订单</a>
                    <a href="#">我的订单</a>
                </div>
            </div>
        </header>
        <header class="header_mid">
            <h1 id="logo"><img src="./images/Logo.png" alt=""></h1>
            <div class="searchbox">
                <input type="text" name="" id="">
                <button>搜索</button>
            </div>
        </header>
        <nav class="header_nav">
            <ul class="header_nav_cont">
                <li>
                    <a href="#">全部商品分类</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
                <li>
                    <a href="#">服装城</a>
                </li>
            </ul>
        </nav>
        <div class="main">
            <p class="crumbs">
                <a href="#">手机、数码、通讯</a>
                <i>/</i>
                <a href="#">手机</a>
                <i>/</i>
                <a href="#">Apple苹果</a>
                <i>/</i>
                <span>iPhone 6S系</span>
            </p>
            <div class="main_top">
                <div class="main_top_l">
                    <div class="main_top_l_simg_box">
                        <img src="./images/s1.png" alt="">
                        <span class="mark"></span>
                        <div class="bigimgbox">
                            <img src="./images/b1.png" alt="">
                        </div>
                    </div>
                    <div class="main_top_l_b">
                        <a class="btn" href="JavaScript:;">&lt;</a>
                        <div class="main_top_simg_list_box">
                            <ul class="main_top_simg_list">
                                <li><img src="./images/s1.png" /></li>
                                <li><img src="./images/s1.png" /></li>
                                <li><img src="./images/s1.png" /></li>
                                <li><img src="./images/s1.png" /></li>
                                <li><img src="./images/s1.png" /></li>
                                <li><img src="./images/s1.png" /></li>
                                <li><img src="./images/s1.png" /></li>
                                <li><img src="./images/s1.png" /></li>
                                <li><img src="./images/s1.png" /></li>
                            </ul>
                        </div>
                        <a class="btn" href="JavaScript:;">&gt;</a>
                    </div>
                </div>
                <!-- 主体内容右侧详情区域 -->
                <div class="main_top_r">
                    
                </div>
            </div>
            <div class="main_content">
                <div class="main_content_l">
                    <ul class="btn_list">
                        <li class="active">相关分类</li>
                        <li>推荐品牌</li>
                    </ul>
                    <ul class="box_list">
                        <li class="box show">
                            <ul class="goods_menu">
                                <li><a href="#">手机</a></li>
                                <li><a href="#">手机</a></li>
                                <li><a href="#">手机</a></li>
                                <li><a href="#">手机</a></li>
                                <li><a href="#">手机</a></li>
                                <li><a href="#">手机</a></li>
                                <li><a href="#">手机</a></li>
                                <li><a href="#">手机</a></li>
                            </ul>
                            <ul class="goods_menu2">
                                <li>
                                    <img src="./images/part01.png" alt="">
                                    <p class="title">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="price">¥6088.00</p>
                                    <p class="btnbox"><a href="#">加入购物车</a></p>
                                </li>
                                <li>
                                    <img src="./images/part01.png" alt="">
                                    <p class="title">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="price">¥6088.00</p>
                                    <p class="btnbox"><a href="#">加入购物车</a></p>
                                </li>
                                <li>
                                    <img src="./images/part01.png" alt="">
                                    <p class="title">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="price">¥6088.00</p>
                                    <p class="btnbox"><a href="#">加入购物车</a></p>
                                </li>
                                <li>
                                    <img src="./images/part01.png" alt="">
                                    <p class="title">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="price">¥6088.00</p>
                                    <p class="btnbox"><a href="#">加入购物车</a></p>
                                </li>
                            </ul>
                        </li>
                        <li class="box ">
                            隐藏box
                        </li>
                    </ul>
                </div>
                <div class="main_content_r">
                    <div class="main_content_r_t">
                        <h4>选择搭配</h4>
                        <div class="choosebox">
                            <p class="goodsbox">
                                <img src="./images/l-m01.png" alt="">
                                <span>¥5299</span>
                                <i>+</i>
                            </p>
                            <ul class="choosebox_list">
                                <li>
                                    <img src="./images/dp01.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <p><input type="checkbox" name="" id="" value="50">50</p>
                                </li>
                                <li>
                                    <img src="./images/dp02.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <p><input type="checkbox" name="" id=""  value="150">150</p>
                                </li>
                                <li>
                                    <img src="./images/dp03.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <p><input type="checkbox" name="" id=""  value="250">250</p>
                                </li>
                                <li>
                                    <img src="./images/dp04.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <p><input type="checkbox" name="" id=""  value="350">350</p>
                                </li>
                            </ul>
                            <div class="choosebox_r">
                                <p>已购0件商品</p>
                                <p>套餐价</p>
                                <p>¥5299</p>
                                <button>加入购物车</button>
                            </div>
                        </div>
                    </div>
                    <!-- 商品详情、评价、售后... -->
                    <div class="main_content_r_b">
                        <ul class="btn_list">
                            <li class="active"><a href="javascript:;">商品介绍</a></li>
                            <li><a href="javascript:;">商品介绍</a></li>
                            <li><a href="javascript:;">商品介绍</a></li>
                            <li><a href="javascript:;">商品介绍</a></li>
                            <li><a href="javascript:;">商品介绍</a></li>
                            <li><a href="javascript:;">商品介绍</a></li>
                        </ul>
                        <ul class="box_list">
                            <li class="show">
                                分辨率：1920*1080(FHD)<br />
                                后置摄像头：1200万像素<br />
                                前置摄像头：500万像素<br />
                                核 数：其他<br />
                                频 率：以官网信息为准<br />
                                品牌： Apple<br />
                                商品名称：APPLEiPhone 6s Plus<br />
                                商品编号：1861098<br />
                                商品产地：中国大陆<br />
                                商品毛重：0.51kg<br />
                                热点：指纹识别，Apple Pay，金属机身，拍照神器<br />
                                系统：苹果（IOS）<br />
                                像素：1000-1600万品毛重：0.51kg<br />
                                机身内存：64GB<br />
                                <img src="./images/intro01.png" alt="">
                                <img src="./images/intro02.png" alt="">
                                <img src="./images/intro03.png" alt="">
                            </li>
                            <li>隐藏内容2</li>
                            <li>隐藏内容3</li>
                            <li>隐藏内容4</li>
                            <li>隐藏内容5</li>
                            <li>隐藏内容6</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>